<template>
    <div class="follow-business">
        <skeleton 
            :loading="firstLoading"
            :rows="3"
        ></skeleton>

        <div 
        v-if="!firstLoading"
        class="business-content"
        >
            <template v-if="tableData && tableData.length > 0">
                <div 
                class="items" 
                v-for="(item , ind) in tableData" 
                :key="ind" 
                v-czc="['首页', '点击列表', '关注企业列表', ind, 'home-list-followBusinessList']"
                >

                    <content-item 
                    :data="item" 
                    :title="`${ind+1}.${item.searchname}`" 
                    :rowguid="item.guid" 
                    @titleClick="titleClick"
                    >
                        <template slot="time">
                            <span></span>
                        </template>

                        <template slot="content">
                            <div class="item-info">
                                <div class="info-row">
                                    <div class="col">
                                        <el-link type="info" :underline="false">法定代表人：{{item.legalpersonname || '-'}}</el-link>
                                    </div>
                                    <div class="col">
                                        <el-link type="info" :underline="false">
                                            注册资本：{{item.regcapital || '-'}}<span v-show="!!item.regcapital">{{item.regcapitalunit}}</span>
                                        </el-link>
                                    </div>
                                    <div class="col">
                                        <el-link type="info" :underline="false">成立日期：{{item.estiblishtime || '-'}}</el-link>
                                    </div>
                                </div>

                                <div class="info-row">
                                    <div class="col">
                                        <el-link type="info" :underline="false">联系方式：{{item.phonenumber || '-'}}</el-link>
                                    </div>
                                </div>

                                <div class="info-row">
                                    <div class="col">
                                        <el-link type="info" :underline="false">地址：{{item.reglocation || '-'}}</el-link>
                                    </div>
                                </div>
                            </div>

                            <div 
                            v-if="~['tbqy', 'cgdw'].indexOf(item.dwtype)"
                            class="dynamic"
                            >
                                <div v-if="item.dwtype == 'tbqy'">
                                    <el-badge is-dot hidden>
                                        <el-link type="primary" :underline="false" @click="titleClick2(item)">参与的项目动态</el-link>
                                    </el-badge>
                                </div>
                                <div v-if="item.dwtype == 'cgdw'">
                                    <el-badge is-dot hidden>
                                        <el-link type="primary" :underline="false" @click="titleClick2(item)">招标的项目动态</el-link>
                                    </el-badge>
                                </div>
                            </div>
                        </template>

                        <template slot="tag">
                            <el-tag size="small" :type="item.regstatus == '正常' ? 'success' : 'primary'" v-if="!!item.regstatus">{{item.regstatus}}</el-tag>
                        </template>

                        <template slot="icon">
                            <collect-star
                                :data="{ objectguid: item.guid, objectname: item.name, objecttype: 'enterprise', marktype: 'follow',}"
                                :defaultVal="item.bj === '1'"
                                :icon="['&#xeca2;', '&#xeca1;']"
                            ></collect-star>
                        </template>

                    </content-item>
                </div>
            </template>

            <empty-list v-if="!tableData.length" :margin="50">
                <span>暂无数据</span>
            </empty-list>
        </div>
        
        <my-pagination 
            v-show="total > pgData.pagesize" 
            class="pagination" 
            ref="page" 
            v-model="tableData"
            :action="`${$store.state.api.tbUrl}/searchrelated/enterpriseinterests.json`" 
            :search="pgData" 
            :auto-show="false" 
            :after-query="afterQuery"
        ></my-pagination>
    </div>
</template>

<script>
import notice from '@/mixins/notice.js';

import CollectStar from '@components/sys/collect.vue';
import EmptyList from '@components/sys/empty-list';
import contentItem from '../../../components/item.vue';
import Skeleton from '../../../components/skeleton.vue';

export default {
    mixins: [notice],
    components: {
        CollectStar,
        EmptyList,
        contentItem,
        Skeleton,
    },
    props: {
        // 列表单页的条数
        pagesize: {
            type: Number,
            default: 10,
        },
    },
    data() {
        return {
            tableData: [],
            total: 0,

            pgData: {
                pagesize: this.pagesize,
            },

            firstLoading: true,
        };
    },
    computed: {
        
    },
    methods: {
        deSearch: function () {
            this.$refs.page.queryData();
        },
        reload: function () {
            this.$refs.page.reload();
        },

        titleClick: function (val) {
            let routeData = this.$router.resolve({
                path: '/portraits',
                query: {
                    guid: val.guid,
                    company: val.searchname,
                },
            });
            window.open(routeData.href, '_blank');
        },
        titleClick2: function (val) {
            this.openNotice(val.noticeid, val.noticetype , false);
        },
        afterQuery: function (data, res) {
            this.total = res.total;

            this.firstLoading = false;
        },
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.follow-business {
    .business-content {
        .items {
            & + .items {
                margin-top: 16px;
            }

            .item-info {
                margin-top: 6px;

                .info-row{
                    display: flex;

                    .col{
                        flex: 1;
                    }

                    & + .info-row{
                        margin-top: 4px;
                    }
                }

                .el-link {
                    font-size: 12px;
                }
            }

            .dynamic {
                display: flex;
                justify-content: space-between;
                width: 300px;
                margin-top: 6px;
                font-size: 14px;
            }
        }
    }
    .pagination {
        margin-top: 20px;
    }
}
</style>